<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>

    <title>出国(境)申请表</title>
    <link rel="stylesheet" href="/css/weui.css"/>
    <link rel="stylesheet" href="/css/main.css"/>
    <script src="/js/vue.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/data/options.js"></script>
    <script src="/data/dist.js"></script>
    <script src="/data/pinyin.js"></script>
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script th:utext="${params}">

    </script>

</head>
<body>
<div class="page__bd" id="app">
    <div class="weui-cells__title" style="background-color: #f0f0f0;">
        基本信息
    </div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd weui-cell__primary" style="flex: 4;">
                身份证号
            </div>
            <div class="weui-cell__ft" style="flex: 7;">
                <input class="weui-input normal_input" v-model="idNumber" placeholder="请输入本人身份证号"/>
            </div>

            <div class="weui-cell__ft" style="flex: 1;height: 6.5vw;">
                <img src="/images/list_icon.png" style="width: 6.5vw;padding-left: 5px;" onclick="showDialog2();"/>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd weui-cell__primary">
                手机号码
            </div>
            <div class="weui-cell__ft" style="flex: 2;">
                <input class="weui-input normal_input" v-model="lxdh" type="number" placeholder="请输入本人手机号码"/>
            </div>
        </div>

        <div class="weui-cell">
            <div class="weui-cell__bd ">
                姓
            </div>
            <div class="weui-cell__ft">
                <input class="weui-input normal_input" v-model="zwx" placeholder="中文姓"/>
            </div>
            <div class="div_blank"></div>
            <div class="weui-cell__bd">
                名
            </div>
            <div class="weui-cell__ft">
                <input class="weui-input normal_input" v-model="zwm" placeholder="中文名"/>
            </div>
        </div>

        <div class="weui-cell">
            <div class="weui-cell__bd">
                拼音姓
            </div>
            <div class="weui-cell__ft">
                <input class="weui-input normal_input" v-model="ywx"/>
            </div>
            <div class="div_blank"></div>
            <div class="weui-cell__bd">
                拼音名
            </div>
            <div class="weui-cell__ft">
                <input class="weui-input normal_input" v-model="ywm"/>
            </div>
        </div>
        <div class="weui-cell_select weui-cell">
            <div class="weui-cell__bd">
                民族
            </div>
            <div class="weui-cell__ft" style="flex: 2;">
                <select class="weui-select" v-model="form.mz">
                    <option v-for="mz in mzOptions" :value="mz.key">{{mz.value}}</option>
                </select>
            </div>
        </div>
        <div class="weui-cell_select weui-cell">
            <div class="weui-cell__bd weui-cell__primary">
                出生地
            </div>
            <div class="weui-cell__ft" style="flex: 2;">
                <select class="weui-select" v-model="form.csd">
                    <option v-for="csd in csdOptions" :value="csd.key">{{csd.value}}</option>
                </select>
            </div>
        </div>
        <div class="weui-cell weui-cell_select">
            <div class="weui-cell__bd weui-cell__primary" style="flex: 31;">
                户口所在地
            </div>
            <div class="weui-cell__ft" style="flex: 23; ">
                <select id="dist1" class="weui-select" v-model="form.dist1">
                    <option v-for="(value, key) in distOptions1" :value="key">{{value}}</option>
                </select>
            </div>
            <div class="weui-cell__ft" style="flex: 23; ">
                <select class="weui-select" v-model="form.dist2" id="dist2">
                    <option v-for="(value, key) in distOptions2" :value="key">{{value}}</option>
                </select>
            </div>
            <div class="weui-cell__ft" style="flex: 23; ">
                <select class="weui-select" v-model="form.hkszd" id="hkszd">
                    <option v-for="(value, key) in distOptions3" :value="key">{{value}}</option>
                </select>
            </div>
            <div id="distMask"
                 style="position: absolute;top:1px;left: 30%;width: 64%;height: 44px;line-height:44px;text-align: right;padding-right: 2px;font-size: 14px ;background-color: white;z-index: 100;">
                <label for='dist1' style="height: 98%;"> {{distName1}} </label>-<label for='dist2' style="height: 98%;">
                {{distName2}} </label>-<label for='hkszd' style="height: 98%;"> {{distName3}} </label>
            </div>
        </div>

        <div class="weui-cell">
            <div class="weui-cell__bd weui-cell__primary">
                紧急联系人
            </div>
            <div class="weui-cell__ft" style="flex: 2;">
                <input class="weui-input normal_input" v-model="form.jjqklxr" placeholder="请输入紧急联系人姓名"/>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd weui-cell__primary">
                紧急联系人电话
            </div>
            <div class="weui-cell__ft">
                <input class="weui-input normal_input" type="number" v-model="form.jjqklxrdh" placeholder="紧急联系人电话"/>
            </div>
        </div>
    </div>


    <div class="weui-cells__title" style="background-color: #f0f0f0;">
        办证信息
    </div>
    <div class="weui-cells weui-cells_checkbox">
        <label class="weui-cell weui-check__label" for="sqlb101">
            <div class="weui-cell__hd">
                <input type="checkbox" class="weui-check" value="101" v-model="form.sqlbArray" id="sqlb101"
                       checked="checked"/>
                <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
                办理普通护照
            </div>
        </label>
        <div class="weui-cell weui-cell_select" :class="{hidden_div:blhzDisplay}">
            <div class="weui-cell__bd weui-cell__primary">
                办理类别
            </div>
            <div class="weui-cell__ft">
                <select class="weui-select" v-model="form.bzlbHz">
                    <option v-for="b in bzlbOptionsHz" :value="b.key">{{b.value}}</option>
                </select>
            </div>
        </div>

        <div class="weui-cell" :class="{hidden_div:hzzlDisplay}">
            <div class="weui-cell__bd weui-cell__primary">
                护照号码
            </div>
            <div class="weui-cell__ft" style="flex: 2;">
                <input class="weui-input normal_input" placeholder="请输入证件号码" v-model="xczjhmHz"/>
            </div>
        </div>
        <div class="weui-cell" :class="{hidden_div:hzzlDisplay}">
            <div class="weui-cell__bd weui-cell__primary">
                护照有效期
            </div>
            <div class="weui-cell__ft" style="flex: 2;">
                <input class="weui-input normal_input " type="number" v-model="form.xczjyxqzHz" placeholder="格式如20180101"/>
            </div>
        </div>


        <div class="weui-cell" :class="{hidden_div:hzjzDisplay}">
            <div class="weui-cell__bd weui-cell__primary">
                曾用名加注
            </div>
            <div class="weui-cell__ft" style="flex: 2;">
                <input class="weui-input normal_input" placeholder="请输入曾用名" v-model="form.cymjz"/>
            </div>
        </div>
        <div class="weui-cell" :class="{hidden_div:hzjzDisplay}">
            <div class="weui-cell__bd weui-cell__primary">
                姓名加注
            </div>
            <div class="weui-cell__ft" style="flex: 2;">
                <input class="weui-input normal_input" placeholder="请输入姓名" v-model="form.xmjz"/>
            </div>
        </div>
        <div class="weui-cell" :class="{hidden_div:hzjzDisplay}">
            <div class="weui-cell__bd weui-cell__primary">
                曾持护照加注
            </div>
            <div class="weui-cell__ft" style="flex: 2;">
                <input class="weui-input normal_input" placeholder="请输入曾持护照号码" v-model="form.cczjz"/>
            </div>
        </div>
    </div>


    <div class="weui-cells weui-cells_checkbox">
        <label class="weui-cell weui-check__label" for="sqlb102">
            <div class="weui-cell__hd">
                <input type="checkbox" class="weui-check" value="102" v-model="form.sqlbArray" id="sqlb102"
                       checked="checked"/>
                <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
                办理往来港澳通行证
            </div>

        </label>
        <div class="weui-cell weui-cell_select" :class="{hidden_div:sqzjhqzGaDisplay}">

            <div class="weui-cell__bd weui-cell__primary">
                申请证件和签注
            </div>
            <div class="weui-cell__ft">
                    <select class="weui-select" v-model="form.sqzjhqzGa">
                    <option v-for="s in sqzjhqzOptions" :value="s.key">{{s.value}}</option>
                </select>
            </div>
        </div>
        <div class="weui-cell weui-cell_select" :class="{hidden_div:blgaDisplay}">
            <div class="weui-cell__bd weui-cell__primary">
                办理类别
            </div>
            <div class="weui-cell__ft">
                <select class="weui-select" v-model="form.bzlbGa">
                    <option v-for="b in bzlbOptionsGa" :value="b.key">{{b.value}}</option>
                </select>
            </div>
        </div>

        <div class="weui-cell" :class="{hidden_div:gazlDisplay}">
            <div class="weui-cell__bd weui-cell__primary">
                往来港澳通行证号码
            </div>
            <div class="weui-cell__ft">
                <input class="weui-input normal_input" placeholder="请输入证件号码" v-model="xczjhmGa"/>
            </div>
        </div>
        <div class="weui-cell" :class="{hidden_div:gazlDisplay}">
            <div class="weui-cell__bd weui-cell__primary">
                往来港澳通行证有效期
            </div>
            <div class="weui-cell__ft">
                <input class="weui-input normal_input" type="number" placeholder="格式如20180101" v-model="form.xczjyxqzGa"/>
            </div>
        </div>

        <label class="weui-cell weui-check__label" for="qwd_hkg" :class="{hidden_div:qzgaDisplay}">
            <div class="weui-cell__hd">
                <input type="checkbox" class="weui-check" value="HKG" v-model="form.qwdArray" id="qwd_hkg"
                       checked="checked"/>
                <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
                往来香港签注
            </div>
        </label>

        <div class="weui-cell weui-cell_select" :class="{hidden_div:xgqzDisplay}">
            <div class="weui-cell__bd weui-cell__primary" style="flex: 38">
                香港签注种类
            </div>
            <div class="weui-cell__ft" style="flex: 29">
                <select class="weui-select" v-model="form.qzzlHkg" v-on:change="onGaqzChange">
                    <option v-for="qzzl in qzzlHkgOptions" :value="qzzl.key">{{qzzl.value}}</option>
                </select>
            </div>

        </div>
        <div class="weui-cell weui-cell_select" :class="{hidden_div:xgqzDisplay}">
            <div class="weui-cell__bd weui-cell__primary" style="flex: 38">
                香港签注次数
            </div>
            <div class="weui-cell__ft" style="flex: 33">
                <select class="weui-select" v-model="form.qzcsHkg" v-on:change="onGaqzChange">
                    <option v-for="qzcs in qzcsHkgOptions" :value="qzcs.key">{{qzcs.value}}</option>
                </select>
            </div>

        </div>

        <label class="weui-cell weui-check__label" for="qwd_mac" :class="{hidden_div:qzgaDisplay}">
            <div class="weui-cell__hd">
                <input type="checkbox" class="weui-check" value="MAC" v-model="form.qwdArray" id="qwd_mac"
                       checked="checked"/>
                <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
                往来澳门签注
            </div>
        </label>





        <div class="weui-cell weui-cell_select" :class="{hidden_div:amqzDisplay}">
            <div class="weui-cell__bd weui-cell__primary" style="flex: 38">
                澳门签注种类
            </div>
            <div class="weui-cell__ft" style="flex: 29">
                <select class="weui-select" v-model="form.qzzlMac" v-on:change="onGaqzChange">
                    <option v-for="qzzl in qzzlMacOptions" :value="qzzl.key">{{qzzl.value}}</option>
                </select>
            </div>

        </div>
        <div class="weui-cell weui-cell_select" :class="{hidden_div:amqzDisplay}">
            <div class="weui-cell__bd weui-cell__primary" style="flex: 38">
                澳门签注次数
            </div>
            <div class="weui-cell__ft" style="flex: 33">
                <select class="weui-select" v-model="form.qzcsMac" v-on:change="onGaqzChange">
                    <option v-for="qzcs in qzcsMacOptions" :value="qzcs.key">{{qzcs.value}}</option>
                </select>
            </div>
        </div>
    </div>
    <div class="weui-cells weui-cells_checkbox">
        <label class="weui-cell weui-check__label" for="sqlb104">
            <div class="weui-cell__hd">
                <input type="checkbox" class="weui-check" value="104" v-model="form.sqlbArray" id="sqlb104"
                       checked="checked"/>
                <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
                办理往来台湾通行证
            </div>
        </label>
        <div class="weui-cell weui-cell_select" :class="{hidden_div:sqzjhqzTwDisplay}">

            <div class="weui-cell__bd weui-cell__primary">
                申请证件和签注
            </div>
            <div class="weui-cell__ft">
                <select class="weui-select" v-model="form.sqzjhqzTw">
                    <option v-for="s in sqzjhqzOptions" :value="s.key">{{s.value}}</option>
                </select>
            </div>
        </div>
        <div class="weui-cell weui-cell_select" :class="{hidden_div:bltwDisplay}">
            <div class="weui-cell__bd weui-cell__primary">
                办理类别
            </div>
            <div class="weui-cell__ft">
                <select class="weui-select" v-model="form.bzlbTw">
                    <option v-for="b in bzlbOptionsTw" :value="b.key">{{b.value}}</option>
                </select>
            </div>
        </div>
        <div class="weui-cell" :class="{hidden_div:twzlDisplay}">
            <div class="weui-cell__bd weui-cell__primary">
                往来台湾通行证号码
            </div>
            <div class="weui-cell__ft">
                <input class="weui-input normal_input" placeholder="请输入证件号码" v-model="xczjhmTw"/>
            </div>
        </div>
        <div class="weui-cell" :class="{hidden_div:twzlDisplay}">
            <div class="weui-cell__bd weui-cell__primary">
                往来台湾通行证有效期
            </div>
            <div class="weui-cell__ft">
                <input class="weui-input normal_input" type="number" placeholder="格式如20180101"  v-model="form.xczjyxqzTw"/>
            </div>
        </div>
        <div class="weui-cell weui-cell_select" :class="{hidden_div:twqzDisplay}">
            <div class="weui-cell__bd weui-cell__primary" style="flex: 38;">
                台湾签注种类
            </div>
            <div class="weui-cell__ft" style="flex: 29;">
                <select class="weui-select" v-model="form.qzzlTwn">
                    <option v-for="qzzl in qzzlTwnOptions" :value="qzzl.key">{{qzzl.value}}</option>
                </select>
            </div>

        </div>
        <div class="weui-cell weui-cell_select" :class="{hidden_div:twqzDisplay}">
            <div class="weui-cell__bd weui-cell__primary" style="flex: 38;">
                台湾签注次数
            </div>
            <div class="weui-cell__ft" style="flex: 33;">
                <select class="weui-select" v-model="form.qzcsTwn" v-on:change="onTwqzChange">
                    <option v-for="qzcs in qzcsTwnOptions" :value="qzcs.key">{{qzcs.value}}</option>
                </select>
            </div>

        </div>





    </div>


    <div class="weui-cells__title">
        证件领取
    </div>
    <div class="weui-cells">
        <div class="weui-cell weui-cell_select">
            <div class="weui-cell__bd weui-cell__primary">
                取证方式
            </div>
            <div class="weui-cell__ft" style="flex: 3;">
                <select class="weui-select" v-model="form.sfxtkzd">
                    <option value="0" selected="selected">前往受理机关领取</option>
                    <option value="1">邮寄送达</option>
                </select>
            </div>
        </div>
        <div class="weui-cell" :class="{hidden_div:emsDisplay}">
            <div class="weui-cell__bd weui-cell__primary">
                邮寄地址
            </div>
            <div class="weui-cell__ft" style="flex: 4;">
                <input class="weui-input normal_input" v-model="form.emsdz" placeholder="请输入详细邮寄地址"/>
            </div>
        </div>
        <div class="weui-cell" :class="{hidden_div:emsDisplay}">
            <div class="weui-cell__bd weui-cell__primary">
                邮编
            </div>
            <div class="weui-cell__ft" style="flex: 2;">
                <input class="weui-input normal_input" v-model="form.yzbm" type="number" placeholder="请输入邮编"/>
            </div>
        </div>
        <div class="weui-cell" :class="{hidden_div:emsDisplay}">
            <div class="weui-cell__bd weui-cell__primary">
                收件人
            </div>
            <div class="weui-cell__ft" style="flex: 2;">
                <input class="weui-input normal_input" v-model="form.sjr" placeholder="请输入收件人姓名"/>
            </div>
        </div>
        <div class="weui-cell" :class="{hidden_div:emsDisplay}">
            <div class="weui-cell__bd weui-cell__primary">
                联系电话
            </div>
            <div class="weui-cell__ft" style="flex: 2;">
                <input class="weui-input normal_input" v-model="form.sjhm" type="number" placeholder="输入收件人联系电话"/>
            </div>
        </div>

    </div>


    <div class="button_area" style="padding-top:10px;">
        <a class="weui-btn weui-btn_primary" v-on:click="check">提 交 申 请</a>
    </div>

    <div style="display: none;">
        <form id="zggmtbForm" name="zggmtbForm" method="post" action="/zggmtb/page/submit">
            <input type="hidden" v-model="formJson" name="formJson" id="zggmtbJson"/>
        </form>
    </div>


</div>


<div class="js_dialog" id="iosDialog" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__bd" id="dialogContent">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
        <div class="weui-dialog__ft">
            <a href="javascript:hideDialog();" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
        </div>
    </div>
</div>
<div class="js_dialog" id="iosDialog1" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title">提醒</strong></div>
        <div class="weui-dialog__bd" id="tipsContent">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
        <div class="weui-dialog__ft">
            <a href="javascript:hideDialog1();" class="weui-dialog__btn weui-dialog__btn_default">取消</a>
            <a href="javascript:app.submit();" class="weui-dialog__btn weui-dialog__btn_primary">继续</a>
        </div>
    </div>
</div>

<div class="js_dialog" id="iosDialog2" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title">提醒</strong></div>
        <div class="weui-dialog__bd">导入您的实名认证信息，将覆盖您的部分输入，确认要进行此操作吗？</div>
        <div class="weui-dialog__ft">
            <a href="javascript:hideDialog2();" class="weui-dialog__btn weui-dialog__btn_default">取消</a>
            <a href="javascript:importInfo();" class="weui-dialog__btn weui-dialog__btn_primary">继续</a>
        </div>
    </div>
</div>
<script src="/js/zggmtb.js"></script>

</body>
</html>